Bab 2 


—0 Wr AI 
ACA 
KEAO), 


Prototype 
Web Toko Online 


Sebelum membahas lebih jauh cara membangun web toko online 
menggunakan Joomla 3, pada Bab 2 ini akan dibahas terlebih dahulu 
prototype web toko online seperti apa yang akan dipersiapkan sebagai 
contoh pembahasan. Pembahasan mengenai prototype web toko online 
tersebut akan dibagi ke dalam dua subbab, yaitu subbab yang membahas 
tentang kerangka web toko online dan subbab yang membahas tentang 


sistem perencanaan web toko online. 


Sama halnya dengan tujuan penulisan Bab 1, Pembaca disarankan untuk 
menyelesaikan Bab 2 ini terlebih dahulu agar dapat memahami secara 
utuh prototype web toko online yang akan dijadikan sebagai contoh pem- 


bahasan cara membangun web toko online di buku ini. 


Meskipun demikian, Pembaca yang ingin langsung mempelajari cara 
membangun toko online menggunakan Joomla 3, dapat langsung 


membuka bab selanjutnya. 
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2.1 PROSES TRANSAKSI DAN KERANGKA 
WEB TOKO ONLINE 


Kerangka web toko online yang dimaksud pada subbab ini pada dasarnya 
merupakan gambaran dari suatu proses transaksi yang terjadi di sebuah 
web toko online. Sebagai rujukan, berikut ini akan dipelajari dan diadopsi 
proses transaksi yang terjadi di dua web toko online, yaitu Amazon.com 
dan 00010.co.id. 


911 Proses Transaksi di Amazon.com 
| .2, Amazon.com: Online Shopping for Elect... | t | 
« amazon.com « “ Google PP £ t- & - 
| A 
Enteln bekma Your Amazon.com  Todays Deals  GiftCards Help 
Shop by n Hello 
Department v Semcu ia Your 
Instant Video MP3 Store Cloud Player Kindle Cloud Drive PA enda je nentat Maa 
kinde 
kindle fire Ho NA 
The ultimate paperw te 
HD experience The world's most 
advanced e-reader 
From $199 » Shop now From $119 » Shop now 
Great Gift Baskets Shoe Trends Amazon Prime 
THE AMAZON SHOE STORE ad 
« p» 


Gambar 2.1 Web toko online berskala Internasional, Amazon.com 


Membaca namanya, sebagian Pembaca mungkin mengira bahwa situs 
Amazon.com menyajikan informasi tentang legenda suku Amazon, yaitu 
bangsa prajurit wanita legendaris dalam mitologi Yunani. Sebagian 


Pembaca lainnya mungkin akan mengira bahwa situs ini menyajikan 


informasi tentang sungai Amazon yang merupakan salah satu sungai 
terpanjang di dunia, atau hutan Amazon yang merupakan hutan tropis 
terluas dan dikenal sebagai paru-paru dunia. Tetapi tidak, Amazon.com 
sama sekali bukan situs yang secara khusus menyajikan informasi tentang 
suku, sungai, atau bahkan hutan Amazon. Amazon.com adalah salah satu 


web toko online terbesar di dunia. 


Berkantor pusat di Seattle, Washington, Amerika Serikat, Amazon.com 
didirikan oleh Jeff Bezos pada bulan Juli 1994 dengan nama Cadabra, 
kemudian dirilis secara online dengan nama Amazon.com tahun 1995. 
Amazon.com berawal sebagai toko buku online, kemudian berkembang 
pesat dan dikenal di seluruh dunia sebagai sebuah toko online terbesar 
yang menawarkan banyak produk seperti DVD, CD, MP3, perangkat 
lunak, permainan video, barang elektronik, perlengkapan, furnitur, 


makanan, mainan, dan perhiasan. 


amazon kindle fire Ho 
Kasi d d Ta 
AN ne YourAmazon.com | Todays Deals  GiftCards Help from 199 

Shop by Ba Hello. Sian in Join 0 
Department v SeNICN | Shoga Your Account” Prime v NWcarr 
Shoes Women Men Girls Boys Desipner Athletic Outdoor ComfortShop Handbaos Clothing & Accessories Sales & Deals 

-DEE DETI IPK IC 8 f 

FREE RETURNS : Aa 


ECCOo 
ECCO Men's Biarritz Plain 
Toe Oxford 


Be the first to review this item 


Price: $189.95 & eligible for k Add to Wish List 


FREE Shipping. Details 
Sam Share MG w 


Select “ 


Sizing info 


Color: Black Patent 


leather 
Rubbersole 
Heel measures approximately 1.” 


Platform measures approximately 0.5 
inches 


bet imm, 


Very Comfortable 
Very Durable 
Extra Toe Room 


# Show more 


Gambar 2.2 Salah satu produk yang ditawarkan Amazon.com 
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Beberapa fitur pencarian disediakan oleh Amazon.com untuk memu- 
dahkan pengunjung (Pelanggan/Calon Pelanggan) menemukan dan me- 
milih produk-produk yang diinginkan. Pengunjung Amazon.com dapat 
menemukan dan memilih produk yang diinginkan, dengan meman- 
faatkan fitur direktori/kategori produk, atau menggunakan kotak pen- 


carian. 


Untuk memudahkan pengunjungnya, pada halaman depan Amazon.com 
juga ditampilkan produk-produk unggulan berdasarkan kriteria tertentu, 
seperti (What Other Customers Are Looking At Right Now|, (Best 
Sellers), (Top New and Upcoming Releases|, (Discount), dan beberapa 


kriteria lainnya. 


Pelanggan yang tertarik, dapat memasukkan produk tersebut ke dalam 
keranjang belanja (Add to Cart). Apabila diinginkan, Pembaca dapat 
melanjutkan menemukan dan memilih produk lainnya untuk dima- 
sukkan ke dalam keranjang belanja. Setelah dirasa cukup, pengunjung 
dapat melakukan (Proceed to checkout) untuk memulai pemesanan 


produk di Amazon.com. 


kindle fire Ho 


amazon Your Amazon.com  Todays Deals  GiftCards Help from 199 

—. 
Shop by 25 Hello. Sign in Join 1 
Department Sanech Go Your Account” Prime v Nycart bl 


@ 1 item added to Cart 


ECCO Men's Biarritz Plain Toe 


Oxford,Black Patent,40 EU/6-6.5M Order subtotal: $189.95 “W Edit your Cart 
MN us 1 item in your Cart 


5 Your order gualifies for free shipping! 
Only 1 left in stock Select FREE Super Saver Shipping at checkout. (Some restrictions apply) 


oa 


“pg Adda $25 “| Amazon.com Bi ea un (@LAddto Cart 
Gambar 2.3 Checkout untuk memesan produk di Amazon.com 


Proses selanjutnya, pengunjung yang sudah menjadi pelanggan 


Amazon.com dapat login menggunakan e-mail dan password yang telah 
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terdaftar. Sedangkan calon pelanggan baru, perlu memasukkan alamat 
e-mail-nya terlebih dahulu untuk mendapatkan akun sekaligus melaku- 


kan pemesanan barang di Amazon.com. 


amazon.com - 
-— SIG, 


Sign In 


Enter your e-mail address 
9 Jam anew customer. 
(You'll create a password later) 


) Iama returning customer, 
and my password is: 


| 
Forgot your password? Click here 


Has your e-mail address changed since your last order? 


Gambar 2.4 Pengunjung perlu memiliki akun untuk pemesanan produk 


Selain berbelanja online, Amazon.com juga menyediakan program make 
money yang memungkinkan para pelanggannya ikut serta menjual 
produk-produk yang ada di Amazon.com, dengan cara memasang link 
iklan di halaman web milik para pelanggan. Pemilik web akan menda- 
patkan komisi untuk setiap transaksi yang terjadi di Amazon.com melalui 
link iklan di web-nya tersebut. Program seperti ini banyak dikenal di 
Internet dengan nama Program Afiliasi (Affiliate Program), dan 
Amazon.com menamakan programnya tersebut dengan sebutan Amazon 


Associates. 


Selain affiliate program, program make money lainnya yang juga dise- 
diakan oleh Amazon.com, yaitu program Sell on Amazon. Dengan 
program Sell on Amazon ini, para pelanggan yang juga pelaku bisnis 
dapat menjual produk-produknya langsung di web toko online 
Amazon.com. Topik menarik mengenai (Amazon Associates) dan 
program (Sell on Amazon| ini akan dibahas lebih lanjut di lain 


kesempatan. 
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555 
- te : 


B titps//affihate-program.amazon.com z 


Woce today, ge. (D HP Desiyet Full Feat... (CJ Indesign () About CLOAP Progr. /4 C1 Other beokmarks 
amazonassociates | Ii agan, 
MP NA “AA, 


Eam up to 104 advertising fees 
with a trusted e-commerce leader 


Learn Mote » 


See All Categories @ 


What's New 


Tax Central 


Advertise Earn Sottware Samngs 

koma ora mann proouKa 9 Vio LARI 

mnonalnditkant mona aa Bea Tax Central v 
ti » 


Gambar 2.5 Amazon.com juga menyediakan program afiliasi 


919 Proses Transaksi di Ooo10.co.id 


“EA am A., — 


www.goo10.co.id/c 


Bly Olfice today, ge... (D HP Deskjet Full Feat...” (CJ Indesign » lower bookmarks 
- 
Ps 


O Vision 


Our vision is to bring together diverse buyers and sellers worldwide and improve life everywhere. We mill strive to provide enjoyable and 
| great shopping experience 


tel stands for “Guest” 
Doo1 '@) @@ stands for “Search” 


1O stands for “Perfection and completeness” 


We will deliver 39 services to our customers 
| Ouest We will dedicate to our customers "@uest" for fun and value 
Ouick We will provide "@uick" and seamless shopping services 


| Ouality We will ensure "@uality" in our entire services 


Gambar 2.6 90010 bermakna Ouest, Search, Perfection & completeness 
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Sepintas, bagi sebagian pengunjungnya, tampilan halaman web 


00010.co.id akan mengingatkan dengan halaman web Ebay.com, salah 


satu pasar online terkemuka di dunia. Hal tersebut tidaklah salah, karena 


memang seperti dijelaskan pada halaman profil perusahaan, O0010.co.id 


adalah milik perusahaan bernama Giosis yang memiliki kaitan e 


dengan Ebay.com. 


rat 


Nama 00010 sendiri, bukannya tanpa arti, O berasal dari kata “Ouest”, 


OO merupakan simbol dari “Search”, dan 10 bermakna “Perfection and 


completeness”. 


Sign in | Register | My Ao010 : @ Cart | Bantuan Mobile App Otaik 


IP Na 
| @ooto:3 Sxsioo 


Shion & Pakaian Beauty & Sports Digital & Mobile Living & Otomotif Bayi & Makanan Buku & Musik Deal & Entertain OPEN 
CHEAPEST KNIT / SWEATER CRAZY LOW PRICES (9 Promo Hari Ini 


BLOUSE / DRESS / BLAZER 


NP - Rp-325000 239 200 FIOT SALE Sulwhasoo 
/ Is — | Ba T... 3 


. WOMEN FASHION SKIN CARE 
SHAPES BAG COLLECTIONS 


NP- Rp-325:000 
O/, 
5s "66.000 
“£OFF . 
MAA » Iki “3 
9 Bestsellers Al Fashion Beauty Digital ' Home | Baby-food ' Music Premium Mall Events 
P, Prriooun Fashion, 
KINOKI t & had pa 
— “3 anda 
ITHEFACESHO: maen 30000m A xIJina.B) Brand KINGSTON FLA Ve 
Rp65.000 Rp55.900 Rp49,500 Rp35,900 


| 
| — 5. — aa -. 

11 www.goo10.co.id ai 
| Bly Office today, ge... (D HP Deskjet Full Feat... (CJ Indesign |") About CLOAP Progr... ( » 0 Other bookmarks 


Pi 


Gambar 2.7 Pasar Online berdomain Indonesia, 00010.co.id 


Proses transaksi di 00010.co.id pun, sangat mirip dengan proses transaksi 


yang terjadi di Ebay.com. Sama dengan Amazon.com, 00010.co.id juga 


menyediakan fitur-fitur untuk menampilkan (display) produk-produk 


yang ditawarkannya. 
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Produk-produk di @oo.co.id ditampilkan menurut jenis/kategori, seperti 
(Fashion & Pakaian|, (Beauty & Sports), (Digital & Mobile), (Buku & 
Musik|, dan lain-lain. Pengunjung juga dapat memanfaatkan kotak 
pencarian (search) untuk mencari produk tertentu berdasarkan kata kunci 
(keywords) yang diinginkan. Selain itu, agar pengunjung dapat secara 
cepat menentukan pilihannya, pada halaman depan O0010.co.id juga 
ditampilkan produk-produk unggulan berdasarkan kriteria tertentu, 
seperti (Promo Hari Ini|, (Brand Zone), (Best Sellers), (Premier Special|, 


(Deal Plus), dan beberapa kriteria lainnya. 


- sa 


— z 
f £ z 


(D HP Deskjet Full Feat... (CJ Indesign About CLOAP Progr... 75 2 (CO Other bookmarks 


NG » PakalanPria » Atasan/Bawahan » Lengan Pendek Item code : 409479948 Wesakui 


IAWE SOME DEAL) x Basic V.neck T-shirt Short Sleeve & Men Fashion x 7 


BasiciV-neckiT-shirtShort-Sleeve Ta 


PREMIUM CASUAL TEE Retail Price Rp150,000 

O-Price Rp75.000 1 

Harga Deal Rp39.000 ( Early Bird Discount : 93aty let 

Pengiriman & WB) JnE- Rp7,000 - 

Biaya tambahan Tergantung pada Otywilayah biaya Pengiriman 
ditambahkan | Details » 

Item Oty 1 Is 

Item Type 

c Silakan pilih - 
Choosen Option Price Oty 


3.000 
Color : Navy Blue T Ig 


Gambar 2.8 Memasukkan produk ke keranjang belanja di 0o010.co.id 


Setelah menemukan produk yang diinginkannya, Pelanggan kemudian 
memasukkan produk tersebut ke dalam keranjang belanja (Add to Cart). 
Sama dengan proses transaksi di Amazon.com, apabila diinginkan, 
Pelanggan dapat melanjutkan menemukan dan memilih produk lainnya 


untuk dimasukkan ke dalam keranjang belanja. Setelah dirasa cukup, 
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pelanggan dapat mengklik tombol (Pesan) yang ada di halaman 


(Shopping Cart) untuk memulai pemesanan (order) di @0o.co.id. 


- EN 


2. z 


1) my.goo10.co.id/gmktinc & sz 


Bby Office today, ge... (D HP Deskjet Full Feat... (C7) Indesign |") About CLOAP Progr... "4 2 (CO Other beokmarks 


| Domestic(Indonesia) 


| Daftar Belanja 

HA Barang Added Price/Option Kuantitas — Diskon Subtotal Pengiriman 
| 

ft Auincy Label R 000 Rika @ Pertanyaan 


Hanana — 


HK AWESOME DEAL x Basic V-neck T-shirt Short Sleeve Men Fashion » 7 ruasinos 
2 Colors Rp75.000 Maa Rp7.000 
al 03/03 z More M1 Rp39,000 5. 


lor : Navy Sue Rpd di Datats » 


Kupon » 
Bai 


Jumlah Pembayaran Domestic only Re-calculate Selected Items 
| 


Total Price Diskon Biaya kirim Total Payment 


Rp75,000 & Rp36,000 H Rp7,000 &  Rp46,000 


total 1 barang 


Use cart coupon » 


Additional fee may be charged in according to payment method 


aa Pesan 
“8 (Untuk Produk yang dipilih) 


Gambar 2.9 Proses pemesanan produk di 90010.co.id 


Proses selanjutnya, pengunjung yang sudah terdaftar sebagai pelanggan 
00010.co.id dapat login menggunakan e-mail dan password yang telah 
terdaftar. Sedangkan calon pelanggan baru, perlu melakukan registrasi 
terlebih dahulu untuk mendapatkan akun sekaligus melakukan peme- 
sanan barang di 90010.co.id. Setelah login, pelanggan/calon pelanggan 
akan diminta untuk memasukkan alamat pengiriman dan memilih 


metode pembayaran. 


913 Kerangka Web Toko Online 


Mengacu pada proses transaksi di web toko online Amazon.com dan 


00010.co.id seperti penjelasan di atas, dapat disimpulkan bahwa secara 
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umum Kerangka Web Toko Online yang akan disiapkan merupakan 


suatu proses transaksi online yang terdiri atas beberapa tahap, yaitu: 
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Tahap pemilihan barang/produk oleh pelanggan/calon 
pelanggan: pada tahap ini pengunjung mencari dan memilih 
berdasarkan tampilan (display) produk di halaman web, menurut 


kriteria/kategori yang telah ditentukan. 


Tahap pemesanan barang/produk oleh pelanggan/calon pe- 
langgans pada tahap ini pemesanan produk hanya dapat 
dilakukan oleh pengunjung yang telah terdaftar. Karenanya, 
pengunjung perlu mendaftar (registrasi) terlebih dahulu (apabila 


belum) kemudian sign-in untuk melakukan pemesanan produk. 


Tahap pembayaran oleh pelanggan: pada tahap ini pelanggan 
melakukan pembayaran terlebih dahulu sesuai dengan meka- 
nisme/metode pembayaran yang telah ditentukan di web toko 


online. 


Tahap pengiriman barang oleh pengelola web toko online, pada 
tahap ini pengelola web toko online melakukan kewajibannya 


dengan mengirimkan produk yang telah dipesan oleh pelanggan. 


Tahap interaksi oleh pelanggan dan pengelola web toko online, 
pada tahap ini, pengelola web toko online mengubah informasi 
status terkini pemesanan produk agar dapat diketahui oleh 
pelanggan di halaman pelanggan/member. Sementara pelanggan 
dapat memeriksa status pemesanan produknya sewaktu-waktu di 


halaman member/pelanggan. 


2.2 SKEMA PERENCANAAN WEB TOKO 
ONLINE 


Pada Subbab 2.1 di atas, telah dibahas kerangka web toko online yang 
menjelaskan tahapan proses transaksi online. Dengan memperhatikan 
tahapan proses transaksi online tersebut, secara garis besar kerangka web 
toko online dapat dikatakan terdiri atas tiga bagian utama, yaitu Halaman 


Publik, Halaman Pelanggan, dan Halaman Pengelola. 


(Halaman Publik) merupakan kumpulan halaman web yang dapat 
dikunjungi dan dilihat oleh siapa pun pengunjung website. Pada kerangka 
web toko online, Halaman Publik ini merupakan media untuk menam- 
pilkan (display) produk-produk yang ditawarkan. Pada Halaman Publik 
ini pula, pengunjung dapat mencari dan memilih produk berdasarkan 
kriteria atau kategori tertentu. Pengunjung juga dapat memasukkan 
produk pilihannya ke keranjang belanja, dan dapat melihat produk apa 
saja di dalam keranjang belanja beserta total nilainya. Pengunjung yang 
tertarik untuk melanjutkan pemesanan barang, juga dapat mengisi form 


pendaftaran untuk mendapatkan akun Login ke halaman pelanggan. 


Sebagaimana tersirat dari namanya, (Halaman Pelanggan) merupakan 
kumpulan halaman web yang hanya dapat dilihat oleh para pengunjung 
yang telah terdaftar sebagai Pelanggan web toko online. Pada Halaman 
ini, Pelanggan dapat memperbarui (update) informasi profil dan/atau 
alamat pengiriman, memeriksa status pemesanan produk, dan meman- 
faatkan fitur lainnya yang disiapkan khusus untuk para pelanggan web 


toko online. 


Sedangkan (Halaman Pengelola) merupakan halaman web yang hanya 
dapat diakses oleh Administrator web atau user lainnya yang diberi hak 
akses. Halaman ini tersedia khusus untuk mengelola web toko online, 
seperti mengatur tampilan web, informasi produk, dan banyak hal lainnya 


yang berkaitan dengan transaksi yang terjadi di web toko online. 
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Sebagai contoh pembahasan di buku ini, akan dibuat web toko online 
yang menawarkan produk-produk Pakaian Anak dengan Skema Peren- 


canaan Website seperti gambar berikut ini. 


Toko Online 

Pakaian Anak 
| Halaman Publik | , . $ Halaman Pelanggan | : Halaman Pengelola | 
| 


— - 


Main Menu Customer Administrator 


Da Gam) T Gems 
Cart NET 3 Addresses : 2 £ 


Search N & Orders 


Products 


Tg Display | ah 


Random 
t || Pa " 
Best | 
: / Latest N 
Recentiy 


Gambar 2.10 Skema Perencanaan Toko Online Pakaian Anak 


Gambar di atas adalah Skema Perencanaan Web Toko Online Pakaian 
Anak yang akan dijadikan sebagai contoh pembahasan dalam membuat 
web toko online menggunakan Joomla 3 di buku ini. Pada Skema tersebut 


dapat dilihat bahwa web toko online Pakaian Anak terdiri atas tiga 
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kelompok halaman web, yaitu Halaman Publik, Halaman Pelanggan, dan 


Halaman Pengelola. 


Pada Halaman Publik Web Toko Online Pakaian Anak, seluruh 


pengunjung dapat melihat dan mengakses beberapa fitur, seperti: 


e (Main Menul: merupakan menu utama yang berfungsi sebagai 
alat navigasi web untuk berpindah ke halaman lainnya, seperti 
display produk menurut (Kategori dan (Brands) (merk), 
(Registrasi) (pendaftaran) pelanggan, (Hubungi Kami| untuk 
kontak pelanggan, dan (Login| ke Halaman Pelanggan. 


e (Cartj: setiap produk yang dipilih pelanggan/calon pelanggan 
akan disimpan di dalam Cart ini (keranjang belanja) sebelum 


dilakukan proses Checkout. 


e (Search|: merupakan fitur yang disediakan untuk memudahkan 


pencarian produk tertentu. 


e (Products Display): menampilkan seluruh produk-produk yang 


ditawarkan. 


e (Random Products): menampilkan produk-produk tertentu 


secara acak. 
e# (Best SellersJ: menampilkan produk terlaris. 


e (Latest Products): menampilkan produk terbaru. 


e (Recently Viewed|: menampilkan produk terakhir yang telah 
dilihat oleh pengunjung. 


Pada Halaman Pelanggan Web Toko Online Pakaian Anak, seluruh 
pelanggan yang terdaftar dapat Login untuk melihat dan mengakses 


beberapa fitur, seperti: 
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e (Customer Accounts|: menyajikan data pelanggan. Pelanggan 
dapat mengedit beberapa informasi seperti nama, password, 


alamat e-mail, dan pengaturan dasar lainnya. 


e (Addresses): pelanggan dapat menambahkan dan mengedit 
alamatnya di sini. Alamat ini diperlukan oleh Pengelola untuk 


dapat mengirim produk pesanan ke alamat yang tepat. 


e (Ordersl: merupakan fitur yang dibutuhkan oleh pelanggan 
untuk memeriksa status pemesanan produk, apakah sudah 


dikirim atau belum. 


Terakhir pada Skema Perencanaan Web Toko Online Pakaian Anak di 
atas adalah (Halaman Pengelola). Pengelola yang merupakan Admi- 
nistrator web atau User lainnya yang diberi hak akses, dapat mengelola 
web toko online Pakaian Anak ini melalui halaman Administrator yang 


sudah disediakan oleh Joomla 3. 
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